<template>
  <div class="users-container">
    <div class="header">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入姓名或账号搜索"
        style="width: 300px"
        clearable
        @clear="handleSearch"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
      
      <el-select
        v-model="searchUserType"
        placeholder="用户类型"
        style="width: 150px; margin-left: 10px"
        clearable
        @change="handleSearch"
      >
        <el-option label="全部" value="" />
        <el-option label="管理员" value="admin" />
        <el-option label="员工" value="employee" />
        <el-option label="客户" value="customer" />
      </el-select>
    </div>
    
    <el-table :data="users" border stripe>
      <el-table-column prop="user_id" label="ID" width="80" />
      <el-table-column prop="username" label="账号" width="150" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="user_type" label="类型" width="100">
        <template #default="{ row }">
          <el-tag :type="getUserTypeTag(row.user_type)">
            {{ getUserTypeName(row.user_type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTag(row.status)">
            {{ getStatusName(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="company" label="公司" width="180" />
      <el-table-column prop="phone" label="电话" width="150" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            v-if="row.status === 'pending'"
            type="primary"
            size="small"
            @click="handleApprove(row.user_id, 'active')"
          >
            通过
          </el-button>
          <el-button
            v-if="row.status === 'pending'"
            type="danger"
            size="small"
            @click="handleApprove(row.user_id, 'frozen')"
          >
            拒绝
          </el-button>
          <el-button
            v-if="row.status === 'active'"
            type="warning"
            size="small"
            @click="handleUpdateStatus(row.user_id, 'frozen')"
          >
            冻结
          </el-button>
          <el-button
            v-if="row.status === 'frozen'"
            type="success"
            size="small"
            @click="handleUpdateStatus(row.user_id, 'active')"
          >
            解冻
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getUsers, approveUser, updateUserStatus } from '@/api/users'
import { ElMessage } from 'element-plus'

const users = ref([])
const searchKeyword = ref('')
const searchUserType = ref('')

const userTypeNames = {
  admin: '管理员',
  employee: '员工',
  customer: '客户'
}

const userTypeTags = {
  admin: 'danger',
  employee: 'warning',
  customer: 'success'
}

const statusNames = {
  pending: '待审核',
  active: '活跃',
  frozen: '冻结'
}

const statusTags = {
  pending: 'info',
  active: 'success',
  frozen: 'danger'
}

const getUserTypeName = (type) => {
  return userTypeNames[type] || type
}

const getUserTypeTag = (type) => {
  return userTypeTags[type] || ''
}

const getStatusName = (status) => {
  return statusNames[status] || status
}

const getStatusTag = (status) => {
  return statusTags[status] || ''
}

const fetchUsers = async () => {
  try {
    const response = await getUsers({
      user_type: searchUserType.value,
      keyword: searchKeyword.value
    })
    users.value = response
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  fetchUsers()
})

const handleSearch = () => {
  fetchUsers()
}

const handleApprove = async (userId, status) => {
  try {
    await approveUser(userId, status)
    ElMessage.success('操作成功')
    fetchUsers()
  } catch (error) {
    console.error(error)
  }
}

const handleUpdateStatus = async (userId, status) => {
  try {
    await updateUserStatus(userId, status)
    ElMessage.success('状态更新成功')
    fetchUsers()
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped>
.users-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}
</style>